<template>
  <div class="topMenu"></div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      navActive: 5,
    };
  },

  methods: {
    // 这三个方法是用来清除子组件中的定时器
    // nodeVoltageCloseEvt(){
    //   this.$refs.nodeVoltageRef.clearTimerEvt()
    // },
    // bypassCloseEvt(){
    //   this.$refs.bypassRef.clearTimerEvt()
    // },
    // stableSectionCloseEvt(){
    //   this.$refs.stableSectionRef.clearTimerEvt()
    // },

    handleSizeChange() {},
    handleCurrentChange() {},
    changeNavActive(o) {
      let x =
        this.stateMenuList.find((item) => item.index === o) ||
        this.tideMenuList.find((item) => item.index === o) ||
        this.staticMenuList.find((item) => item.index === o);
      if (x) {
        x.show = true;
      }
    },
    resetNavActive(o) {
      let x =
        this.stateMenuList.find((item) => item.index === o) ||
        this.tideMenuList.find((item) => item.index === o) ||
        this.staticMenuList.find((item) => item.index === o);
      if (x) {
        x.show = false;
      }
    },
  },
  components: {},
  computed: {
    ...mapGetters(["topbar"]),
  },
};
</script>

<style lang="scss" scoped>
.topMenu {
  > div {
    display: flex;
    height: 100%;
  }

  .firstMenu {
    border-left: 1px solid #e2e5e5;
  }
  .menuItemBox {
    border-right: 1px solid #e2e5e5;
    .item {
      width: 112px;
      text-align: center;
      cursor: pointer;
      .imgBox {
        width: 34px;
        height: 34px;
        margin: 8px auto 2px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .name {
        color: #000000;
        font-size: 13px;
        font-family: MicrosoftYahei;
      }
    }
  }
}
.el-col {
  line-height: 36px;
}
.el-checkbox-group {
  .el-checkbox {
    margin: 0 15px 15px 0;
    &.el-checkbox--medium {
      margin: 0 15px 15px 0;
    }
  }
}
.el-radio-group {
  .el-radio {
    margin: 0 15px 15px 0;
    &.el-radio--medium {
      margin: 0 15px 15px 0;
    }
  }
}
.el-form-item {
  margin-bottom: 0;
}
.el-pagination {
  margin-top: 15px;
}
.el-input {
  width: 200px;
}

.el-button {
  vertical-align: top;
  margin-right: 15px;
  background: #43ada3;
}

//修改ui元素主题颜色
::v-deep {
  .el-tabs__item {
    &.is-active {
      color: #43ada3;
    }
    &:hover {
      color: #43ada3;
    }
  }
  .el-radio {
    border: 1px solid rgb(207, 204, 204);
    &.is-checked {
      border: 1px solid #43ada3 !important;
    }
    &:hover {
      border-color: #43ada3 !important;
      color: #43ada3 !important;
      .el-radio__inner {
        border-color: #43ada3;
      }
    }
    .el-radio__input {
      margin-bottom: px(5);
      &.is-checked {
        .el-radio__inner {
          background-color: #43ada3;
          border-color: #43ada3;
        }
        + .el-radio__label {
          color: #43ada3 !important;
        }
      }
      .el-radio__inner {
        &:hover {
          border-color: #43ada3;
        }
      }
    }
  }
  .el-checkbox {
    border: 1px solid rgb(207, 204, 204);
    &.is-checked {
      border: 1px solid #43ada3 !important;
    }
    &:hover {
      border-color: #43ada3 !important;
      color: #43ada3 !important;
      .el-checkbox__inner {
        border-color: #43ada3;
      }
    }
    .el-checkbox__input {
      margin-bottom: px(5);
      &.is-focus {
        .el-checkbox__inner {
          border-color: #dcdfe6;
        }
      }
      &.is-checked {
        .el-checkbox__inner {
          background-color: #43ada3;
          border-color: #43ada3;
        }
        + .el-checkbox__label {
          color: #43ada3 !important;
        }
      }
      .el-checkbox__inner {
        &:hover {
          border-color: #43ada3;
        }
      }
    }
  }
}
</style>
